<template>
  <div class="line-chart">
    <div class="line-chart__radio">
      <el-radio-group v-model="radioValue" @input="radioChangeEvent">
        <el-radio :label="0">日</el-radio>
        <el-radio :label="1">周</el-radio>
        <el-radio :label="2">月</el-radio>
        <el-radio :label="3">年</el-radio>
      </el-radio-group>
    </div>

    <chart-view
      class="line-chart__container"
      :chart-option="trendMultipleLineOption"
      :auto-resize="true"
      height="100%"
    />

    <div class="line-chart__tip">
      <div class="line-chart__tip__item">
        <span>应力值：</span>
        <span class="line-chart__tip__item__value"
          >{{ relatedData.stressValue }}KN</span
        >
      </div>
      <div class="line-chart__tip__time">
        <span>更新时间：</span>
        <span class="line-chart__tip__time__value">{{
          relatedData.updateTime
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { multipleLineOptionHandler } from "./configs/line.conf";

//#region 临时展示数据--START
import { generateMonitoringDataData } from "../../../temp/data";
// #endregion 临时展示数据--END

export default {
  name: "LineCharts",
  data() {
    return {
      relatedData: {
        stressValue: "110.0",
        updateTime: "2023-3-31 23:30:27"
      },
      trendsData: [],
      radioValue: 0
    };
  },

  computed: {
    trendMultipleLineOption() {
      return multipleLineOptionHandler(this.trendsData);
    }
  },

  created() {
    this.getMonitoringTrendsData();
  },

  methods: {
    /**
     * 监测趋势单选按钮变化事件
     */
    radioChangeEvent(value) {
      this.getMonitoringTrendsData(value);
    },

    /**
     * 获取监测趋势数据方法
     * @param {Object} key 传入筛选 key
     */
    getMonitoringTrendsData(key = 0) {
      let arrayData = []
      arrayData.push(generateMonitoringDataData(key))
      arrayData.push(generateMonitoringDataData(key))
      this.trendsData = arrayData;
    }
  }
};
</script>

<style lang="less" scoped>
.line-chart {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;

  .line-chart__radio {
    margin-left: auto;
    margin-right: 1.25rem;
  }

  .line-chart__container {
    width: 100%;
    height: 80%;
    margin-bottom: 0.3125rem;
  }

  .line-chart__tip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0.9375rem 0 2.5rem;
    box-sizing: border-box;
    font-size: 0.625rem;
    color: #fff;

    .line-chart__tip__item {
      display: flex;
      align-items: center;

      .line-chart__tip__item__value {
        color: #66d4d0;
      }
    }

    .line-chart__tip__time {
      display: flex;
      align-items: center;

      .line-chart__tip__time__value {
        color: #66d4d0;
      }
    }
  }

  /deep/ .el-radio__inner {
    background-color: transparent !important;
  }

  /deep/ .el-radio__input.is-checked .el-radio__inner {
    background: transparent !important;
  }

  /deep/ .el-radio__inner::after {
    width: 9px !important;
    height: 9px !important;
    background-color: #d9d9d9;
  }

  /deep/ .el-radio__input.is-checked + .el-radio__label {
    color: rgb(96, 98, 102);
  }
}
</style>
